<template>
    <el-row>
        <el-col :span="24">

            <el-card>
                <template #header>
                    <el-row>
                        <el-col :span="12"><h3>资源管理列表</h3></el-col>
                        <el-col :span="12" style="text-align: right">
                            <el-button-group>
                                <el-button size="small" type="primary" icon="el-icon-folder-opened" @click="isExpand = true">全部展开</el-button>
                                <el-button size="small" type="success" icon="el-icon-plus" @click="addResource">添加资源</el-button>
                                <el-button size="small" type="primary" icon="el-icon-folder" @click="isExpand = false">全部收起</el-button>
                            </el-button-group>
                        </el-col>
                    </el-row>
                </template>
                <div>
                    <el-table :data="resourceTableData" row-key="id" default-expand-all>
                        <el-table-column prop="name" label="名称"/>
                        <el-table-column prop="path" label="路径"/>
                        <el-table-column prop="iconClass" label="图标">
                            <template #default="scope">
                                <span><i :class="scope.row.iconClass"></i>&emsp;{{ scope.row.iconClass }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="资源类型" align="center" width="100">
                            <template #default="scope">
                                <el-tag v-if="scope.row.type === 0" size="medium" type="success">菜单项</el-tag>
                                <el-tag v-else-if="scope.row.type === 1" size="medium" type="warning">菜单</el-tag>
                                <el-tag v-else-if="scope.row.type === 2" size="medium" type="danger">权限项</el-tag>
                                <el-tag v-else size="medium" type="info">未定义</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sortNo" align="center" label="排序" width="70"/>
                        <el-table-column fixed="right" align="center" label="操作" width="150">
                            <template #default="scope">
                                <el-button @click="modifyResource(scope.row)"
                                           type="primary"
                                           size="mini">修改
                                </el-button>
                                <el-button @click.prevent="delResource(scope.row.id)" type="danger" size="mini">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
        <resource-form v-model:show="resourceForm.show"
                       :opt="resourceForm.event"
                       :datas="resourceForm.data"
                       @finishMethod="getResourceList"/>
    </el-row>
</template>

<script>
import ResourceForm from "@/views/system/resource/ResourceForm"
import resourceReq from '@/services/resource/request'

export default {
    name: 'Resource',
    components: {ResourceForm},
    data() {
        return {
            resourceTableData: [],
            resourceForm: {
                show: false,
                event: "",
                data: null,
            },
            isExpand: true
        }
    },
    mounted() {
        // 加载列表
        this.getResourceList()
    },
    methods: {
        async getResourceList() {
            let r = await resourceReq.listTree()
            if (r.code === 0) {
                this.resourceTableData = r.data
            } else {
                this.$message.err(r.msg)
            }
        },
        addResource() {
            this.resourceForm.data = {}
            this.resourceForm.event = 'ADD'
            this.resourceForm.show = true
        },
        delResource(id) {
            this.$confirm("确定删除本行数据么?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                let r = await resourceReq.delete({}, [id])
                if (r.code === 0) {
                    this.$message.success("删除成功");
                    await this.getResourceList()
                } else {
                    this.$message.error(r.msg);
                }
            }).catch(err => {
            });
        },
        modifyResource(row) {
            // 深拷贝
            this.resourceForm.data = JSON.parse(JSON.stringify(row))
            this.resourceForm.event = 'EDIT'
            this.resourceForm.show = true
        }
    }
}
</script>